<script setup>
import FormComponentMixin from "../FormComponentMixin.js";
import {computed, ref} from "vue";
import employeesDialog from '../../dialog/employeesDialog.vue'

const props = defineProps({
  ...FormComponentMixin.props
})
const emit = defineEmits([...FormComponentMixin.emits])
const _value = computed(FormComponentMixin.computed._value(props, emit))
const orgPicker = ref()
const approverVisible = ref(false);
const checkedList = ref([]);
function selectOk(users){
  _value.value = users
  orgPicker.value.close()
}
const addApprover = ()=> {
    approverVisible.value = true;   
}
const sureApprover = (data)=> {
    console.log(data);
    checkedList.value = data;
    approverVisible.value = false;
}

const deletitem = (item)=> {
    checkedList.value.indexOf(item) > -1 && checkedList.value.splice(checkedList.value.indexOf(item), 1);
}
const removeAll = ()=> {
    checkedList.value = []
}
</script>

<template>
  <div style="display: flex; align-items: center">
   
    <p class="selected_list">
                            <span v-for="(item,index) in checkedList" :key="index">{{item.name}}
                                <img src="../../../../../assets/images/add-close1.png" @click="deletitem(item)">
                            </span>
                            <a v-if="checkedList.length!=0" @click="removeAll">清除</a>
    </p>
    <el-button type="primary" @click="addApprover" >添加/修改成员</el-button>
    <!-- <w-org-tags inline v-model="_value" v-if="(_value || []).length > 0"/>
    <el-text class="w-placeholder">{{config.props.placeholder}}</el-text> -->
    <employees-dialog  v-model:visible="approverVisible" :data="checkedList"   @change="sureApprover" />
    <!-- <w-org-picker :multiple="config.props.multiple" ref="orgPicker" type="user" :selected="_value" @ok="selectOk"/> -->
  </div>
</template>

<style scoped>
.w-placeholder {
  margin-left: 10px;
  color: var(--el-text-color-placeholder);
}
.selected_list {
    margin-bottom: 20px;
    line-height: 30px;
}

.selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid rgba(220, 220, 220, 1);
}

.selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
}
</style>
